<script setup lang="ts">
const handleLongPress = () => {
  uni.showActionSheet({
    itemList: ['识别二维码'],
    success: () => {
      // 直接用微信内置扫码
      uni.previewImage({
        urls: ['https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/B59B2AF8CE609F517BE8352330A79EDB.jpg'], // 支持多图
        current: "https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/B59B2AF8CE609F517BE8352330A79EDB.jpg"
      })
    }
  })
}

const start = () => {
  uni.previewImage({
    urls: ['https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/B59B2AF8CE609F517BE8352330A79EDB.jpg'], // 支持多图
    current: "https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/B59B2AF8CE609F517BE8352330A79EDB.jpg"
  })
}
</script>

<template>
  <template>
    <view class="container">
      <!-- 标题 -->
      <view class="title">
        关注【乐码无忧】公众号，开启微信提醒服务
      </view>

      <!-- 蓝色链接 -->
      <view class="link-line">
<!--        <text class="link-label">点它 →</text>-->
        <text class="link">乐码无忧</text>
      </view>

      <!-- 时间 & 浏览量 -->
      <view class="meta">
        <text class="time">2025年08月15日 22:29</text>
        <text class="view">👁️ 999人</text>
      </view>



      <!-- 公众号卡片 -->
      <view class="boss-card" style="margin-top: 10px">
        <view class="boss-info">
          <view class="boss-name">
            乐码无忧
            <text class="verify">✔</text>
          </view>
          <view class="boss-desc">
            乐码无忧提供海量订单/程序/…
          </view>
          <view class="boss-content">6篇原创内容</view>
        </view>
      </view>

      <!-- 提示文字 -->
      <view class="follow-tip">
        ↓↓ 长按下图，关注公众号 ↓↓
      </view>

      <!-- 微信二维码区域 -->
      <view class="qrcode-box">
        <view class="qrcode-title">开启微信提醒服务</view>
        <image class="qrcode" :show-menu-by-longpress="true" src="https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/B59B2AF8CE609F517BE8352330A79EDB.jpg" alt=""></image>
        <view class="qrcode-tip">长按关注二维码</view>
      </view>
      <official-account></official-account>
      <!-- 底部公众号信息 -->
<!--      <view class="bottom-card">-->
<!--        <image class="bottom-logo" src="/static/boss-logo.png" mode="aspectFill"></image>-->
<!--        <view class="bottom-name">乐码无忧</view>-->
<!--        <view class="follow-btn disabled" v-if="false">已关注</view>-->
<!--        <button class="follow-btn" style="background: #4B7BF5" v-else open-type="openOfficialAccount" @click="start">关注</button>-->
<!--      </view>-->
    </view>
  </template>

</template>

<style scoped lang="scss">
page {
  background-color: #fff;
}

.container {
  padding: 20rpx;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 48rpx;
}

.link-line {
  margin-top: 16rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.link-label {
  color: #999;
}

.link {
  //margin-left: 10rpx;
  //color: #0084ff;
  font-weight: bold;
}

.meta {
  margin-top: 12rpx;
  color: #888;
  font-size: 24rpx;
  display: flex;
  justify-content: space-between;
}

.follow-tip {
  margin: 30rpx 0;
  text-align: center;
  font-size: 26rpx;
  color: #222;
  font-weight: bold;
}

.boss-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 2rpx solid #f1f1f1;
  border-radius: 16rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.boss-logo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  margin-right: 20rpx;
}

.boss-info {
  flex: 1;
}

.boss-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.verify {
  margin-left: 8rpx;
  color: #0aa1ff;
  font-size: 26rpx;
}

.boss-desc {
  font-size: 24rpx;
  color: #555;
  margin-top: 4rpx;
}

.boss-content {
  margin-top: 6rpx;
  font-size: 22rpx;
  color: #999;
}

.qrcode-box {
  margin-top: 30rpx;
  padding: 30rpx;
  text-align: center;
  background: linear-gradient(180deg, #81e1ef, #34dadf);
  border-radius: 20rpx;
}

.qrcode-title {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.qrcode {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
}

.qrcode-tip {
  font-size: 24rpx;
  color: #fff;
}

.bottom-card {
  position: fixed;
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 2rpx solid #f1f1f1;
  border-radius: 16rpx;
  background-color: #fff;
  bottom: 10px;
  width: calc(100% - 20px)
}

.bottom-logo {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.bottom-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.follow-btn {
  padding: 10rpx 24rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  background-color: #00c1de;
  color: #fff;
}

.follow-btn.disabled {
  background-color: #eaeaea;
  color: #999;
}

</style>